<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { message } from "@/utils/message";
import { useStompJsStoreHook } from "@/store/modules/webSocket";
import { Chat } from "@/api/chat";
import { getToken } from "@/utils/auth";
import { TimeAgo } from "@/components/ReTime";

defineOptions({
  name: "Chat"
});

const msgData = ref<Array<Chat>>([]);
const chatMsg = ref("");
const scroller = ref();

const scrollToBottom = () => {
  scroller.value?.scrollToBottom();
};

const chatHandle = () => {
  if (chatMsg.value) {
    useStompJsStoreHook().Send("/chat/public", { msg: chatMsg.value });
    chatMsg.value = "";
  } else {
    message("消息不存在", { type: "warning" });
  }
};

onMounted(() => {
  useStompJsStoreHook().Subscribe<Chat>("/topic/chat/public", res => {
    console.log(res);
    msgData.value.push(res);
    scrollToBottom();
  });
});

onUnmounted(() => {
  useStompJsStoreHook().UnSubscribe("/topic/chat/public");
});
</script>

<template>
  <div class="main">
    <el-card class="mb-4 box-card w-2/3" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium">公共聊天室</span>
        </div>
      </template>
      <div class="h-[470px]">
        <DynamicScroller
          ref="scroller"
          :items="msgData"
          :min-item-size="20"
          class="scroller"
          key-field="time"
          @resize="scrollToBottom"
        >
          <template #default="{ item, index, active }">
            <DynamicScrollerItem
              :active="active"
              :class="[getToken().id == item.from ? 'message-me' : 'message']"
              :data-active="active"
              :data-index="index"
              :item="item"
              :size-dependencies="[item.msg]"
              :title="`${index} ${item.from}`"
            >
              <!-- 消息发送者，气泡靠右 -->
              <div v-if="getToken().id == item.from" class="text-right my-2">
                <div class="inline-block">
                  <p class="text-xs text-gray-500 mb-1">
                    {{ item.fromName }}
                  </p>
                  <div class="flex justify-end">
                    <div
                      class="bg-blue-500 text-white text-sm rounded-lg px-3 py-1 max-w-xs overflow-hidden overflow-wrap"
                    >
                      <p class="text-left">{{ item.msg }}</p>
                    </div>
                  </div>
                  <p class="text-xs text-gray-500 mt-1">
                    <TimeAgo :value="item.time" />
                  </p>
                </div>
              </div>

              <!-- 消息接收者，气泡靠左 -->
              <div v-else class="text-left my-2">
                <div class="inline-block">
                  <p class="text-xs text-gray-500 mb-1">
                    {{ item.fromName }}
                  </p>
                  <div class="flex justify-start">
                    <div
                      class="bg-gray-300 text-gray-800 text-sm rounded-lg px-3 py-1 max-w-xs overflow-hidden overflow-wrap"
                    >
                      <p class="text-left">{{ item.msg }}</p>
                    </div>
                  </div>
                  <p class="text-xs text-gray-500 mt-1">
                    <TimeAgo :value="item.time" />
                  </p>
                </div>
              </div>
            </DynamicScrollerItem>
          </template>
        </DynamicScroller>
      </div>
    </el-card>
    <el-card class="box-card w-2/3" shadow="never">
      <el-row type="flex" class="h-full p-1">
        <el-col>
          <el-input
            v-model="chatMsg"
            type="textarea"
            placeholder="输入消息并回车发送"
            :rows="4"
            resize="none"
            @keyup.enter="chatHandle"
          />
        </el-col>
      </el-row>
      <el-row type="flex" class="h-full p-1">
        <el-col>
          <el-button class="float-end" type="primary" @click="chatHandle">
            发送
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.message {
  box-sizing: border-box;
  display: flex;
  min-height: 25px;
  padding: 0 12px;
}

.message-me {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  min-height: 25px;
  padding: 0 12px;
}

.scroller {
  flex: auto 1 1;
  height: 100%;
}
</style>
